<template>
  <div class="container" style="margin-top: -55px">
    <div style="height: 45px;background-color: #02A774;margin-top: 0px">
      <font color="#f0f8ff" size="5px" style="margin: 0 auto;">订单详情</font>
    </div>
    <div>
      <el-table
        :data="ordersList"
        style="width: 100%">
        <el-table-column
          prop="o_id"
          label="订单id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="o_allnumber"
          label="订单总数"
          width="180">
        </el-table-column>
        <el-table-column
          prop="o_allprice"
          label="订单总金额">
        </el-table-column>
      </el-table>
    </div>

    <div style="height: 50px" class="fixed">
      <div style="float: right;margin-right: 5px;margin-top: 8px">
        <el-row>
          <el-button type="primary" style="height: 100%" @click="jieSuan()">结算</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    data(){
      return{
        ordersList: []
      }
    },
    methods: {
      selOrder(){
        var _this = this;
        axios.get("/vip/OrderController/addOrder").then(function (res) {
          _this.ordersList = res.data;
        })
      },
      jieSuan(){
        var _this = this;
        alert("TTTTT======"+this.ordersList[0].o_allprice);
        axios.get("/vip/AlipayController/pay/"+this.ordersList[0].o_id+"/"+this.ordersList[0].o_allnumber+"/"+this.ordersList[0].o_allprice).then(function (res) {
          _this.html = res.data
          var form= res.data;
          const div = document.createElement('div')
          div.innerHTML = form //此处form就是后台返回接收到的数据
          document.body.appendChild(div)
          document.forms[0].submit()

        })
      }
    },
    mounted() {
      this.selOrder();
    }
  }
</script>
<style scoped>
  .container{
    font-size:15px;
    color:#333;
  }
  .info-item{
    padding:20px;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .info-item .info-item-content{
    flex-grow: 1;

  }
  .receive-name,.receive-addr{
    padding:10px 0;
  }
  .send-time{
    color:blue;
  }

  .sec-head{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding:20px;
    border-bottom:  2px solid #ccc;
  }
  .txt-shop-name{
    margin-left:10px;
  }
  .icon-house{
    width:40px;
    height:40px;
  }
  .txt-order-status{
    color:#ccc;
    text-align: right;
    flex-grow: 1;
  }
  .sec-body{
    padding:50px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .cart-items{
    border-bottom: 2px solid #ccc;
  }
  .cart-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding:12px 20px;
  }

  .item-name{
    flex-grow: 1;
  }
  .item-count{
    width:25%;
    color:#aaa;
  }
  .total-price{
    color:#aaa;
  }
  .real-price{
    color:#f00;
    display: inline-block;
  }

  .submit-bar{
    width:100%;
    position:fixed;
    bottom: 0;
    background-color:#fff;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .txt-need{
    flex-grow: 1;
    text-align: right;
  }
  .need-pay{
    color:#f00;
    padding:0 20px;
  }
  .submit-btn{
    padding:30px;
    background-color:#FDCE00;
  }
  /*将div固定底部  css*/
  .fixed{ position:fixed;
    left:0px;
    bottom:0px;
    width:100%;
    height:50px;
    background-color:darkseagreen;
    z-index:9999;
  }

</style>
